
{{-- 继承布局模板 --}}
@extends( 'mofa.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('mofa/css/about.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>广州魔发科技有限公司,发型虚拟试戴</title>
@endsection


@section('content')
    <section class="banner">

    </section>

    <section class="us">
        <div class="bym-wrapper">
            <h3 class="us-title">
                关于我们
            </h3>
            <p class="us-desc">
                广州魔发科技有限公司，是一家专注发型行业科技与互联网应用的创新企业，由广州帕克西软件开发有限公司提供技术支撑。公司将面型识别、面部数据测量、AR技术、3D发型定制技术应用于发型行业，实现发型在线定制及真人试戴，为发型行业营销及个性化定制服务提供完整的解决方案，助力发型行业转型升级。
            </p>


            <ul class="us-list bym-not-list">
                <li class="us-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/about/Product_gywm_cpgn_002.png" alt="">
                    </i>
                    <h4 class="item-title">企业文化</h4>
                    <p class="item-desc">坚韧不拔 开拓创新</p>
                </li>
                <li class="us-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/about/Product_gywm_cpgn_003.png" alt="">
                    </i>
                    <h4 class="item-title">企业使命</h4>
                    <p class="item-desc">让科技助力时尚</p>
                </li>
                <li class="us-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/about/Product_gywm_cpgn_004.png" alt="">
                    </i>
                    <h4 class="item-title">企业愿景</h4>
                    <p class="item-desc">让天下没有剪错的发型</p>
                </li>
            </ul>
        </div>
    </section>

    <section class="partner">
        <div class="bym-wrapper">

            <div class="partner-title">
                合作伙伴
            </div>

            <ul class="partner-list bym-not-list">
                <li class="partner-list-item">
                    <img src="https://benyamin.gz.bcebos.com/mofa/home/panx.png" alt="">
                    <p class="partner-list-item-name">帕克西软件开发</p>
                </li>
                <li class="partner-list-item">
                    <img src="https://benyamin.gz.bcebos.com/mofa/home/igs.png" alt="">
                    <p class="partner-list-item-name">新加坡IGS</p>
                </li>
                {{--<li class="partner-list-item">--}}
                    {{--<img src="https://bym-website.gz.bcebos.com/assets/about/Product_gywm_cpgn_009.png" alt="">--}}
                    {{--<p class="partner-list-item-name">派丽蒙</p>--}}
                {{--</li>--}}
                {{--<li class="partner-list-item">--}}
                    {{--<img src="https://bym-website.gz.bcebos.com/assets/about/Product_gywm_cpgn_010.png" alt="">--}}
                    {{--<p class="partner-list-item-name">康耐特</p>--}}
                {{--</li>--}}
            </ul>

        </div>
    </section>



    <section class="contact">

        <div class="bym-wrapper clearfix">
            <div class="contact-title">
                联系我们
            </div>

            <div class="contact-map">

                <!-- <div class="contact-map-content" id="mapContent">

                </div> -->

                <!-- {{--<p class="contact-map-name">公司地图</p>--}} -->
                <div id="wrap" class="my-map">
		            <div id="mapContainer"></div>
	            </div>
            </div>

            <ul class="contact-list bym-not-list company-information">
                <li class="contact-list-item">公司：广州魔发科技有限公司</li>
                <li class="contact-list-item">电话：020-82520103</li>
                <li class="contact-list-item">微信：18925177752</li>
                <li class="contact-list-item">QQ：3047909572</li>
                <li class="contact-list-item">邮箱：3047909572@qq.com</li>
                <li class="contact-list-item">网址：www.gzmofa.com</li>
                <li class="contact-list-item">地址：广州市番禺区小谷围街广州大学城华南理工大学</li>
            </ul>

        </div>

    </section>
@endsection

@section('script')
    <script type="text/javascript" src="https://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <script type="text/javascript" src="{{asset('mofa/js/about.js')}}"></script>
    <script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
	<script>
	!function(){
		var infoWindow, map, level = 18,
			center = {lng: 113.405563, lat: 23.047546},
			features = [{type: "Marker", name: "广州魔发科技有限公司", desc: "广州市番禺区小谷围街广州大学城华南理工大学", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 113.405563, lat: 23.047546}}];

		function loadFeatures(){
			for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
				data = features[i];
				switch(data.type){
					case "Marker":
						feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
							zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
							content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
						break;
					case "Polyline":
						for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
							path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
						}
						feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
							strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
						break;
					case "Polygon":
						for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
							path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
						}
						feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
							strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
							fillColor: data.fillColor, fillOpacity: data.fillOpacity });
						break;
					default: feature = null;
				}
				if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
			}
		}

		function mapFeatureClick(e){
			if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
			var extData = e.target.getExtData();
			infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
			infoWindow.open(map, e.lnglat);
		}

		map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
		
		loadFeatures();

		map.on('complete', function(){
			map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
				map.addControl(new AMap.ToolBar);
			map.addControl(new AMap.OverView({isOpen: true}));
			map.addControl(new AMap.Scale);
			});	
		})
		
	}();
	</script>
@endsection
